<template>
 <div class="all">
 <div class="left">
      <van-sidebar v-model="active"  >
      <van-sidebar-item v-for="item in category" :key="item.id" :title="item.name" @click="handleCategoryChange(item.id)"/>
      
    </van-sidebar>
 </div>
  <div class="right">
    <van-grid>
  
  <van-grid-item  v-for="child in children"  :key="child.id" :icon="child.imageUrl" :text="child.title" />
  
</van-grid>
  </div>
  
 </div>


</template>

<script lang="ts" setup>
import { ref } from 'vue';
import {getCategotyList,getSubCategotyList} from '../../api/category'
const active=ref(1)
const category=ref([])
const getCategories=async ()=>{
  try{
    
    const categoryList=await getCategotyList()
  category.value=categoryList.data.data.list
  handleCategoryChange(2)
  console.log(categoryList)
  }catch(error){
    console.error('异常',error)
  }
}
getCategories()

//查询各分类下的品牌
const children=ref([])
const handleCategoryChange=async (id:any)=>{
  try{
    const subCategoryProduct=await getSubCategotyList(id)
 
  children.value=subCategoryProduct.data.data.categories

  }catch(error){
    console.error('异常',error)
  }
}





    

</script>

<style  lang="less" scoped>
.all{
  display: flex;
}
.left{
  width: 80px;
  background-color: pink;
}
.right{
  width: calc(100% - 80px);
  background-color: aqua;
  height: 100vh;
}

</style>
